<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-top {
            font-size: 14px;
            line-height: 30px;
        }

        .adver-top .adver-title {
            text-indent: 10px;
        }

        .adver-top .adver-close {
            padding: 0 5px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- <div class="adver">
        <div class="adver-top">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-detail">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div> -->
</body>
<script>
    // 动态操作小广告(默认隐藏)

    // 1. 5s后动态生成小广告
    // 2. 倒计时10秒后关闭小广告
    // 3. 重复 1 - 2 两步
    // 4. 点击 x  直接关闭


    // <div class="adver">
    //     <div class="adver-top">
    //         <div class="adver-title">距离广告关闭还有10秒</div>
    //         <div class="adver-close">X</div>
    //     </div>
    //     <div class="adver-detail">
    //         <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
    //     </div>
    // </div>

    adverLoop();

    function adverLoop(delay, options) {
        // option = {delayTime,countDown,adverImg,position:{left,top}}

        delay = (delay === undefined ? 5000 : delay);
        var delayTimer = setTimeout(function () {
            // debugger;
            var adver = document.createElement("div");
            adver.setAttribute("class", "adver");
            console.log(adver);

            // adverTop
            var adverTop = document.createElement("div");
            adverTop.setAttribute("class", "adver-top");
            adver.appendChild(adverTop);

            var adverTitle = document.createElement("div");
            adverTitle.setAttribute("class", "adver-title");
            adverTitle.innerText = "距离广告关闭还有10秒";
            adverTop.appendChild(adverTitle);

            var adverClose = document.createElement("div");
            adverClose.setAttribute("class", "adver-close");
            adverClose.innerText = "x";
            adverTop.appendChild(adverClose);

            adverClose.onclick = function () {
                adver.remove();
                clearInterval(timer);
                clearTimeout(delayTimer);

                adverLoop(delay);
            }

            // adverDetail
            var adverDetail = document.createElement("div");
            adverDetail.setAttribute("class", "adver-detail");
            adver.appendChild(adverDetail);

            var img = document.createElement("img");
            // var img = new Image();  // 构造函数创建图片
            // console.log(img);
            img.setAttribute("src", "../images/bzsc-dgbhz-300-250-7-5.gif");

            adverDetail.appendChild(img);

            document.body.appendChild(adver);


            var num = 10;
            adverTitle.innerText = `距离广告关闭还有${num}秒`;
            var timer = setInterval(function () {
                num--;
                adverTitle.innerText = `距离广告关闭还有${num}秒`;

                if (num <= 0) { //计时结束
                    clearInterval(timer);
                    adver.remove();

                    adverLoop(delay);
                }

            }, 1000);

        }, delay)
    }



</script>

</html>